<!--
 * @Author: 杨光辉_GerhardYang
 * @Date: 2020-12-22 23:07:48
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-08-09 09:21:22
 * @Description: file content
-->
<template>
  <div class="rightmenu">
    <nav class="cd-side-navigation">
      <div class="menu-fold-style">
        <a-button
          class="fold-button"
          @click="hidOrShow"
          :title="fold ? '展开' : '收缩'"
        >
          <a-icon style="fontsize: 25px" type="menu-unfold" v-show="!fold" />
          <a-icon style="fontsize: 25px" type="menu-fold" v-show="fold" />
        </a-button>
      </div>

      <ul>
        <li
          v-for="menu in menus"
          :key="menu.title"
          @click="selectMenu(menu)"
          v-show="menu.title != '统计' || (menu.title == '统计' && userName)"
        >
          <div
            :class="menu.title == activeMenu ? 'selected' : ''"
            class="menus-div"
          >
            <icon-font
              class="menus-icon iconfont"
              :type="'icon-' + menu.icon"
            />
            <a>{{ menu.title }}</a>
          </div>
        </li>
      </ul>
    </nav>

    <a-card :title="activeMenu" class="menu-panel" v-show="!hasFoldedMenu">
      <Layers ref="Layers" v-show="activeMenu == '图层'" />
      <Suspended ref="Suspended" v-show="activeMenu == '日新'" />
      <Kewei ref="Kewei" v-show="activeMenu == '客危'" />
      <Statistics ref="Statistics " v-show="activeMenu == '统计' && userName" />
      <Tools ref="XYto" v-show="activeMenu == '工具'" />
      <Print ref="Print" v-show="activeMenu == '打印'" />
      <About ref="About" v-show="activeMenu == '关于'" />
    </a-card>
  </div>
</template>

<script>
import Layers from "./Layers";
import Kewei from "./Kewei";
import Suspended from "./Suspended";
import Tools from "./Tools";
import Print from "./Print";
import About from "./About";
import Statistics from "./Statistics";
import { Icon } from "ant-design-vue";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "./iconfont/iconfont.js",
});
import {
  showRightMenu,
  hideRightMenu,
  showBottomPanel,
  hideBottomPanel,
} from "@/utils/divResize";
import services from "@/services/api.js";
export default {
  data() {
    return {
      menus: [
        {
          title: "图层",
          icon: "layers",
          index: "Layers",
          child: "TreeSearchResult",
        },
        {
          title: "日新",
          icon: "fuwuqi",
          index: "Suspended",
          child: { index: "CalendarIndex", child: "SuspendedSearchResult" },
        },
        {
          title: "客危",
          icon: "dingwei",
          index: "Kewei",
          child: { index: "CalendarIndex", child: "VehicleTrackResult" },
        },
        {
          title: "统计",
          icon: "tongji",
          index: "Statistics",
          child: "",
        },
        { title: "工具", icon: "gongju", index: "", child: "" },
        { title: "打印", icon: "089print", index: "", child: "" },
        { title: "关于", icon: "guanyu", index: "", child: "" },
      ],
      activeMenu: "图层",
      hasFoldedMenu: false,
      fold: false,
      isbottom: false,
      currentMenu: {},
    };
  },
  components: {
    Layers,
    Kewei,
    Suspended,
    IconFont,
    Tools,
    Print,
    About,
    Statistics,
  },
  computed: {
    userName() {
      return this.$store.state.userName;
    },
  },
  mounted() {
    this.currentMenu = this.menus[0];
    this.getUerName();
    //this.$store.commit("setUserName", "res.userName");
    //console.log("Hnjt@2020", this.userName);
  },

  methods: {
    async getUerName() {
      await services
        .getUserName()
        .then((res) => {
          console.log("用户信息", res);
          // res.roles=["ADMIN","SYSTEM"]
          res.userName &&
          res.userName != null &&
          res.roles.filter((item) => item === "ADMIN" || item === "SYSTEM")
            .length
            ? this.$store.commit("setUserName", res.userName)
            : "";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectMenu(menu) {
      console.log(menu.title);
      this.activeMenu = menu.title;
      this.currentMenu = menu;

      this.showbottom();

      if (this.hasFoldedMenu) {
        this.hasFoldedMenu = false;
        this.fold = false;
        showRightMenu();
      }
    },
    showbottom() {
      if (this.currentMenu.child && this.currentMenu.index) {
        if (this.currentMenu.child.child && this.currentMenu.child.index) {
          this.isbottom =
            this.$refs[this.currentMenu.index].$refs[
              this.currentMenu.child.index
            ].$refs[this.currentMenu.child.child].visible;
        } else {
          this.isbottom =
            this.$refs[this.currentMenu.index].$refs[
              this.currentMenu.child
            ].visible;
        }
      }
      //  else if (this.currentMenu.title == '打印') {
      // 	this.isbottom = true

      // }
      else {
        this.isbottom = false;
      }

      if (this.isbottom) {
        console.log(this.isbottom);
        showBottomPanel();
      } else {
        hideBottomPanel();
      }
    },
    hidOrShow() {
      this.fold = !this.fold;
      if (this.hasFoldedMenu) {
        this.hasFoldedMenu = false;
        showRightMenu();
        this.showbottom();
      } else {
        this.hasFoldedMenu = true;
        hideRightMenu();
      }
    },
  },
};
</script>
<style lang="less">
@hovercolor: #e6f7ff;

/* -------------------------------- 
Navigation
-------------------------------- */
.rightmenu {
  position: absolute;
  right: 0px;
  z-index: 1000;
  .menu-panel {
    width: 300px;
    height: 100vh;
    overflow: hidden;
    background-color: #ffff;
    z-index: 5;
  }
  .cd-side-navigation {
    position: fixed;
    z-index: 4;
    top: 0px;
    right: 300px;
    height: 100vh;
    width: 50px;
    //display: none;
    overflow: hidden;
    background-color: @rightMenuBgColor;
    user-select: none;
    .menu-fold-style {
      text-align: center;
      .fold-button {
        height: 58px;
        width: 100%;
        color: rgb(78, 80, 75);
        border: 0em;
        border-radius: 0em;
        border-bottom: 1px solid rgb(211, 210, 210);
      }
    }
    ul {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;

      li {
        cursor: pointer;
        width: 100%;
        border-bottom: 1px solid #7fa1762f;
      }
      li :hover {
        background-color: @hovercolor;

        .menus-icon {
          color: @themeBackgroundColor;
          background-color: transparent;
        }
        .menus-icon > svg:hover {
          background-color: transparent !important;
        }
        a {
          color: @themeBackgroundColor;
          background-color: transparent;
        }
      }
    }
  }

  .menus-div {
    position: relative;
    padding: 10px;
    //transition: background-color 0.2s, color 0.2s;

    .menus-icon {
      display: block;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      color: @rightFontColor;
    }

    a {
      display: block;
      font-size: 10px;
      line-height: 15px;
      text-align: center;
      color: @rightFontColor;
    }
  }

  .menus-div.selected {
    background-color: @hovercolor;
    .menus-icon {
      color: @themeBackgroundColor;
    }
    a {
      color: @themeBackgroundColor;
    }
  }
}
</style>
